<template>
	<view>
		<view v-for="(item, index) in studentDetails" :key="index">
			<u-card :title="item.title" padding="30" margin="26rpx" :sub-title="item.startTime">

				<view class="" slot="body">
					<view>
						<view class="u-body-item-title u-line-2" style="white-space: break-spaces">{{ item.content }}
						</view>
					</view>
				</view>

				<view slot="foot">
					<uni-collapse>
						<uni-collapse-item title="作业内容">
							<view class="content">
								<text class="text">{{ item.map ? item.map.content : "" }}</text>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<view>
						<view>作业评价:</view>
						<uni-data-checkbox v-model="item.map.level" :localdata="level"
							@change="levelChange(item.map)"></uni-data-checkbox>
					</view>
					<view>作业提交时间:{{ item.map ? item.map.startTime : "" }}</view>
				</view>
			</u-card>
		</view>
	</view>
</template>

<script>
import {
	getWorkInfoAndWorkStudentByStudentId
} from '@/api/jz/student/info.js';

import {
	updateInfo as updateStudentWorkInfo
} from '@/api/jz/work/info.js';

export default {
	data() {
		return {
			studentID: null,
			studentDetails: [],
			level: [{
				text: '优秀',
				value: 'A'
			}, {
				text: '良好',
				value: 'B'
			}, {
				text: '及格',
				value: 'C'
			},
			{
				text: '不及格',
				value: 'D'
			}, {
				text: '未完成',
				value: 'E'
			}]
		}
	},
	onLoad: function (option) {
		if (option.studentID) this.studentID = option.studentID
	},
	mounted() {
		this.getWorkInfoAndWorkStudentByStudentId()
	},
	methods: {
		levelChange(val) {
			updateStudentWorkInfo(val).then((res) => {
				if (res.code === 200) {
					uni.showToast({
						title: `操作成功`
					})
				}
			})
		},
		getWorkInfoAndWorkStudentByStudentId() {
			getWorkInfoAndWorkStudentByStudentId(this.studentID).then((res) => {
				this.studentDetails = []
				if (res.code == 200) {
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].map && res.data[i].map.isAnnounce === 1) {
							this.studentDetails.push(res.data[i])
						}
					}
				}
			}).catch((err) => {
				console.error(err);
			});
		}
	}

}
</script>

<style>
.u-line-2,
.u-line-3,
.u-line-4,
.u-line-5 {
	display: unset !important;
}
</style>